<template>
  <div class="cover-upload">
    <div class="cover-grid">
      <!-- 图像列表 -->
      <div class="grid-item" v-for="(item, index) in coverList" :key="index">
        <!-- 图像 -->
        <el-tooltip effect="dark" placement="top" content="点击预览">
          <el-image :src="item.url" :preview-src-list="coverUrlList" fit="cover"></el-image>
        </el-tooltip>
        <!-- 删除 -->
        <div class="grid-item-delete">
          <i class="el-icon-error" :style="{color:theme}" @click="onRemoveCurrentCover(item.id)"></i>
        </div>
      </div>
      <!-- 上传按钮 -->
      <div 
        class="grid-item" 
        v-if="coverList.length < maxLength" 
        @click="showGroup = true"
      >
        <img class="grid-upload-img" :src="uploadIcon" alt="点击上传">
      </div>
    </div>

    <el-dialog 
      title="图片库" 
      width="790px" 
      center 
      :visible.sync="showGroup" 
      append-to-body
      :close-on-click-modal="false" 
    >
      <photo-group 
        :base-length="coverList.length" 
        :max-length="maxLength" 
        :dir-name="dirName" 
        v-bind="$attrs" 
        @cancel="showGroup = false" 
        @choose="onChoose"
      />
    </el-dialog>
  </div>
</template>

<script>
import PhotoGroup from '@/components/PhotoGroup'
export default {
  name: 'CoverUpload',
  components: { PhotoGroup },
  props: {
    // {id:1, url: 'xx'}
    cover: {
      type: [Object, Array],
      defualt: () => []
    },
    // 最多可选择数量
    maxLength: {
      type: Number,
      default: 4
    },
    // 上传文件夹
    dirName: {
      type: String,
      default: 'cover'
    },
    // 其他的属性 通过 v-bind="$attrs" 传递
    // 包括：oneUpCount、dirName、fileTypes、fileSize、switchFix、fixNumber、resultType
  },
  computed: {
    // 统一转为数组
    coverList() {
      if (!this.cover || JSON.stringify(this.cover) == '{}') return []
      if (Array.isArray(this.cover)) return this.cover
      return [this.cover]
    },
    // 封面url数组
    coverUrlList() {
      if (Array.isArray(this.coverList) && this.coverList.length) {
        return this.coverList.map(cover => cover.url)
      }
      return []
    },
    theme() {
      return this.$store.state.settings.theme
    }
  },
  data() {
    return {
      showGroup: false,
      uploadIcon: require('../../assets/common/upload.png'),
    }
  },
  methods: {
    // 选择图片
    onChoose(data) {
      if (Array.isArray(this.value)) {
        this.$emit('choose', data)
      } else {
        this.$emit('choose', data[0])
      }
    },
    // 索引删除图片
    onRemoveCurrentCover(imageId) {
      this.$confirm('确定要删除该图片么？', '删除提示', {
        type: 'warning',
      }).then(() => {
        if (Array.isArray(this.value)) {
          this.$emit('choose', this.value.filter(item => item.id != imageId))
        } else {
          this.$emit('choose', {})
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.cover-upload {
  .cover-grid {
    display: grid;
    grid-template-rows: 120px;
    grid-template-columns: repeat(4, 120px);
    grid-auto-rows: 120px;
    grid-auto-columns: 120px;
    gap: 10px;
    .grid-item {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
      background-color: #f5f5f5;
      cursor: pointer;
      .grid-upload-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
	      height: 44px;
        transform: translate(-50%, -50%);
      }
      .grid-item-delete {
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 5px;
        font-size: 20px;
        line-height: 20px;
        cursor: pointer;
      }
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

